{% extends "base.html" %}

{% block title %}{{ activity.title }} - Volunteer Platform{% endblock %}

{% block content %}
<div class="activity-detail">
    <div class="activity-header">
        <h1>{{ activity.title }}</h1>
        <div class="activity-status">
            <span class="status-badge {{ activity.status }}">
                {% if activity.status == 'pending' %}Pending Review
                {% elif activity.status == 'approved' %}In Progress
                {% elif activity.status == 'completed' %}Completed
                {% elif activity.status == 'cancelled' %}Cancelled
                {% endif %}
            </span>
        </div>
    </div>

    <div class="activity-content">
        <div class="activity-main">
            <div class="section">
                <h2>Activity Details</h2>
                <div class="info-grid">
                    <div class="info-item">
                        <span class="label">Start Time</span>
                        <span class="value">{{ activity.start_time }}</span>
                    </div>
                    <div class="info-item">
                        <span class="label">End Time</span>
                        <span class="value">{{ activity.end_time }}</span>
                    </div>
                    <div class="info-item">
                        <span class="label">Location</span>
                        <span class="value">{{ activity.location }}</span>
                    </div>
                    <div class="info-item">
                        <span class="label">Participants</span>
                        <span class="value">{{ activity.registered_count }}/{{ activity.max_participants }}</span>
                    </div>
                </div>

                <div class="description">
                    <h3>Description</h3>
                    <p>{{ activity.description }}</p>
                </div>

                {% if activity.required_skills %}
                <div class="skills">
                    <h3>Required Skills</h3>
                    <p>{{ activity.required_skills }}</p>
                </div>
                {% endif %}
            </div>

            <div class="section">
                <h2>Organization Information</h2>
                <div class="charity-info">
                    <div class="charity-header">
                        {% if charity.logo_url %}
                        <img src="{{ charity.logo_url }}" alt="{{ charity.name }} Logo" class="charity-logo">
                        {% endif %}
                        <h3>{{ charity.name }}</h3>
                    </div>
                    <p>{{ charity.description }}</p>
                    <div class="contact-info">
                        <p><strong>Contact Person:</strong> {{ charity.contact }}</p>
                        <p><strong>Phone:</strong> {{ charity.phone }}</p>
                        <p><strong>Address:</strong> {{ charity.address }}</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="activity-sidebar">
            <div class="section action-card">
                {% if session.get('user_type') == 'volunteer' %}
                    {% if not is_registered %}
                        {% if activity.status == 'approved' and activity.registered_count < activity.max_participants %}
                        <button class="btn btn-primary btn-large" onclick="registerActivity()">Register Now</button>
                        {% else %}
                        <button class="btn btn-primary btn-large" disabled>Registration Closed</button>
                        {% endif %}
                    {% else %}
                        <button class="btn btn-danger btn-large" onclick="cancelRegistration()">Cancel Registration</button>
                    {% endif %}
                {% elif not session.get('user_id') %}
                    <a href="{{ url_for('login') }}" class="btn btn-primary btn-large">Login to Register</a>
                {% endif %}

                <div class="registration-info">
                    <p>Registered: {{ activity.registered_count }} people</p>
                    <p>Available Spots: {{ activity.max_participants - activity.registered_count }}</p>
                </div>
            </div>

            {% if registered_volunteers %}
            <div class="section">
                <h3>Registered Volunteers</h3>
                <div class="volunteers-list">
                    {% for volunteer in registered_volunteers %}
                    <div class="volunteer-item">
                        <span class="volunteer-name">{{ volunteer.name }}</span>
                        <span class="registration-time">{{ volunteer.registration_time }}</span>
                    </div>
                    {% endfor %}
                </div>
            </div>
            {% endif %}
        </div>
    </div>
</div>

<style>
.activity-detail {
    padding: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.activity-header {
    margin-bottom: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.activity-content {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2rem;
}

.section {
    background: white;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    margin-bottom: 2rem;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.info-item {
    display: flex;
    flex-direction: column;
}

.info-item .label {
    color: #666;
    margin-bottom: 0.5rem;
}

.info-item .value {
    font-size: 1.1rem;
    font-weight: 500;
}

.description, .skills {
    margin-bottom: 2rem;
}

.charity-info {
    padding: 1rem 0;
}

.charity-header {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
}

.charity-logo {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 50%;
    margin-right: 1rem;
}

.contact-info {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.contact-info p {
    margin-bottom: 0.5rem;
}

.action-card {
    text-align: center;
}

.btn-large {
    width: 100%;
    padding: 1rem;
    font-size: 1.1rem;
    margin-bottom: 1rem;
}

.registration-info {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.volunteers-list {
    margin-top: 1rem;
}

.volunteer-item {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-color);
}

.registration-time {
    color: #666;
    font-size: 0.9rem;
}

@media (max-width: 768px) {
    .activity-content {
        grid-template-columns: 1fr;
    }
    
    .activity-header {
        flex-direction: column;
        text-align: center;
    }
    
    .activity-status {
        margin-top: 1rem;
    }
}
</style>

<script>
function registerActivity() {
    if (confirm('Are you sure you want to register for this activity?')) {
        fetch(`/api/activities/{{ activity.id }}/register`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                location.reload();
            } else {
                alert(data.message || 'Failed to register for the activity');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Failed to register for the activity');
        });
    }
}

function cancelRegistration() {
    if (confirm('Are you sure you want to cancel your registration?')) {
        fetch(`/api/activities/{{ activity.id }}/register`, {
            method: 'DELETE',
            headers: {
                'Content-Type': 'application/json'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                location.reload();
            } else {
                alert(data.message || 'Failed to cancel registration');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Failed to cancel registration');
        });
    }
}
</script>
{% endblock %} 